<template>
  <div id="myPhoto">
  <br><br>
    <div class="main-button">
      <el-button @click="creatAlbum()">创建自定义相册</el-button>
    </div>
    <div class="main-album">
      <ul class="list-album">
        <li v-for="item in photos" :key="item.id">
          <div class="one-album" id="album-life">
            <a href="http://localhost:8085/#/personCenter/myPhotoDet/"><img src="./album-myPhoto/1.jpg" class="first-page"></a>
            <div class="photo-num">10</div>
            <div class="photo-name">{{item.name}}</div>
            <div class="drapdown-set-album">
              <span class="set-album"><el-button type="text">设置</el-button></span>
            <div class="drapdown-set-album-list">
              <P>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList2"
                  list-type="picture">
                  <el-button size="small" type="primary">上传照片</el-button>
                </el-upload>
              </P>
              <p><input type="button" @click="albumPassword()" value="设置密码" /></p>
              <p><input type="button" @click="photoDesc()" value="修改描述" /></p>
              <p><input type="button" @click="albumDel(item)" value="删除" id="del-life" /></p>
            </div>
          </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'myPhoto',
      data() {
        return {
          photos: [],
          fileList2: [],
        }
      },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      albumDel(item){
        this.$confirm('此操作将永久删除该相册, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delPhotos(item);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      photoDesc() {
        this.$prompt('请输入相册描述：', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的描述是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      albumPassword() {
        this.$prompt('请设置密码：', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的密码是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      creatAlbum() {
        this.$prompt('请输入相册名', '创建相册', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        },
        ).then(({ value }) => {
          this.addPhotos(value);
          this.$message({
            type: 'success',
            message: '创建成功 '
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
      getPhotos(url,id){
        this.$http({
          method: 'get',
          url: 'album/listAlbum',
        }).then((response)=>{
          response = response.data;
          if(response.status == 'SUCCESS'){
              this.photos = response.object;
          }else{
            this.$message({
              type:'error',
              message:response.message,
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:response.message,
          });
        });
      },
      delPhotos(item){
        this.$http({
          method: 'post',
          url: 'album/deleteAlbum',
          data:{id:item.id}
        }).then((response)=>{
          response = response.data;
          if(response.status == 'SUCCESS'){
              var i = this.photos.indexOf(item);
              this.photos.splice(i,1);
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
          }else{
            this.$message({
              type:'error',
              message:response.message,
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:response.message,
          });
        });
      },
      addPhotos(value){
        this.$http({
          method: 'post',
          url: 'album/addAlbum',
          data:{name:value}
        }).then((response)=>{
          response = response.data;
          let data = response.object;
          if(response.status == 'SUCCESS'){
            this.getPhotos();
            this.photos.splice(this.photos.length,0,...data.objects);
          }else{
            this.$message({
              type:'error',
              message:response.message,
            });
          }
        }).catch((err)=>{
          this.$message({
            type:'error',
            message:response.message,
          });
        });
      },
    },
    created: function (argument) {
        this.getPhotos();
    },
  }

</script>

<style scoped>
  #myPhoto {
    width: 800px;
    height: 200px;
  }
  .main-button{
    position: relative;
    left: 40px;
    bottom: 10px;
  }
  div.one-album{
    margin:3px;
    border:1px solid #bebebe;
    height:auto;
    width:auto;
    float:left;
    margin-right: 10px;
    border-radius: 5px;
    padding: 10px
  }

  img.first-page{
    width: 200px;
    height: 200px;
    display:inline;
  }

  div.photo-num{
    text-align:center;
    color: gray;
  }

  div.photo-name{
    text-align:center;
    font-weight:normal;
    font-size:15px;
  }

  ul{
    list-style-type: none;
  }

  div.drapdown-set-album{
    position: relative;
    display: inline-block;
  }
  .set-album{
    position: relative;
    left: 5px;
    bottom: -4px;
  }
  div.drapdown-set-album-list{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
  }

  .drapdown-set-album:hover .drapdown-set-album-list{
    display: block;
  }

</style>